<template>
  <div>
    <br />
    <el-container>
      <el-header style="text-align: center; height: 100px">
        <div class="block">
          <el-avatar v-image-preview :src="imageUrl" :size="100"></el-avatar
          ><el-button
            @click="uploadAvatarDialog = true"
            v-if="haveAvatar"
            size="small"
            >上传头像</el-button
          >
          <el-button v-else type="danger" @click="deleteAvatar" size="small"
            >删除头像</el-button
          >
        </div>
      </el-header>
      <el-main>
        <el-form v-if="ifUpdate" :model="personAccount" class="demo-ruleForm">
          <fieldset disabled>
            <div class="form-group">
              <el-form-item prop="userName"
                >用户名
                <el-input
                  type="text"
                  autocomplete="off"
                  v-model="personAccount.userName"
              /></el-form-item>
            </div>
            <div class="form-group">
              <el-form-item prop="fullName"
                >别名
                <el-input
                  type="text"
                  autocomplete="off"
                  v-model="personAccount.fullName"
              /></el-form-item>
            </div>
            <div class="form-group">
              <el-form-item prop="email"
                >邮箱
                <el-input
                  type="text"
                  autocomplete="off"
                  v-model="personAccount.email"
              /></el-form-item>
            </div>
          </fieldset>
          <el-form-item>
            <el-button class="btn btn-primary" @click="changeIfUpdate"
              >更改信息</el-button
            >
          </el-form-item>
        </el-form>

        <el-form
          :model="personAccountUpdate"
          ref="personAccountUpdate"
          :rules="rule"
          v-else
        >
          <fieldset>
            <div class="form-group">
              <el-form-item prop="u_userName"
                >用户名
                <el-input
                  type="text"
                  v-model="personAccountUpdate.u_userName"
                  autocomplete="off"
                  disabled
              /></el-form-item>
            </div>
            <div class="form-group">
              <el-form-item prop="u_fullName"
                >别名
                <el-input
                  type="text"
                  autocomplete="off"
                  v-model="personAccountUpdate.u_fullName"
              /></el-form-item>
            </div>
            <div class="form-group">
              <el-form-item prop="password"
                >密码
                <el-input
                  type="password"
                  autocomplete="off"
                  placeholder="请输入密码"
                  v-model="personAccountUpdate.password"
                  show-password
              /></el-form-item>
            </div>
            <div class="form-group">
              <el-form-item prop="passwordConfirm"
                >再次输入密码
                <el-input
                  type="password"
                  autocomplete="off"
                  placeholder="请再次输入密码"
                  v-model="personAccountUpdate.passwordConfirm"
                  show-password
              /></el-form-item>
            </div>
          </fieldset>
          <el-form-item>
            <el-button class="btn btn-primary" @click="changeIfUpdate"
              >取消更改</el-button
            >
            <el-button
              class="btn btn-primary"
              @click="changeAccount('personAccountUpdate')"
              >更改</el-button
            >
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer></el-footer>
    </el-container>

    <el-dialog :visible.sync="uploadAvatarDialog" width="400px">
      <el-upload
        class="upload-demo"
        ref="upload"
        action=""
        accept="image/jpeg, image/png"
        :on-remove="handleRemove"
        :auto-upload="false"
        :on-change="uploadImg"
        list-type="picture"
        :file-list="fileUpLoadList"
        :limit="1"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          @click="uploadAvatar"
          style="margin-left: 10px"
          size="small"
          type="success"
          >上传头像</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过1MB
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState, mapActions } from 'vuex'
export default {
  inject: ['reload'],
  name: 'personalAccount',
  data () {
    const checkpwd = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,20}$/
    const validatePwd = (rule, value, callback) => {
      if (!checkpwd.test(value)) {
        callback(new Error('密码应是6-20位数字，字母或字符！'))
      } else {
        callback()
      }
    }
    const validatePwdConfirm = (rule, value, callback) => {
      if (!checkpwd.test(value)) {
        callback(new Error('密码应是6-20位数字，字母或字符！'))
      } else if (this.personAccountUpdate.password != value) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    return {
      ifUpdate: true,
      // 账户表
      personAccount: {
        userName: '',
        fullName: '',
        email: '',
        userId: ''
      },
      // 更新账户表
      personAccountUpdate: {
        u_userName: '',
        u_fullName: '',
        password: '',
        passwordConfirm: ''
      },
      // 图片地址
      imageUrl: '',
      // 头像dialog
      uploadAvatarDialog: false,
      // 更换显示按钮
      haveAvatar: true,
      // 获取头像
      imageFile: {},
      // 上传头像的file
      fileData: new FormData(),
      fileData: new window.FormData(),
      // 头像id
      imageId: '',
      // 主页轮播图片表单
      fileUpLoadList: [],
      // 获得全部头像，为了小黑
      allImage: [],

      rule: {
        u_fullName: [
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePwd, trigger: 'blur' }
        ],
        passwordConfirm: [
          { required: true, message: '请输入密码进行验证', trigger: 'blur' },
          { validator: validatePwdConfirm, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
      userId: (state) => state.userId.all
    })
  },
  mounted: function () {
    this.getUserAccount()
  },
  methods: {
    getUserAccount: function () {
      var that = this
      axios({
        headers: {
          Authorization: this.print.Authorization
        },
        method: 'get',
        url: '/api/users/single?username=' + this.print.username
      }).then(
        function (reponse) {
          that.personAccount = reponse.data.data

          that.personAccountUpdate.u_userName = reponse.data.data.userName
          that.personAccountUpdate.u_fullName = reponse.data.data.fullName
        },
        function (err) {
          that.$message.error('获取失败')
        }
      )

      // 获取头像
      axios({
        headers: { Authorization: this.print.Authorization },
        method: 'get',
        url: '/api/image/user?userId=' + this.userId.userId
      }).then(function (response) {
        that.imageFile = response.data.data
        that.imageFile = that.imageFile.filter((item) => item.tag == 'Avatar')
        if (that.imageFile.length == 0) {
          that.haveAvatar = true
          // 获得小黑头像
          var _that = that
          axios({
            method: 'get',
            url: '/api/image/tag?tag=Show'
          }).then(function (response) {
            _that.allImage = response.data.data
            _that.allImage.forEach((img) => {
              if (img.imageName == 'black.') {
                _that.imageUrl = img.url
              }
            })
          })
        } else {
          that.haveAvatar = false
          that.imageUrl = that.imageFile[0].url
        }
      })
    },

    changeIfUpdate: function () {
      this.ifUpdate = !this.ifUpdate
      this.personAccountUpdate.u_fullName = this.personAccount.fullName
    },

    changeAccount: function (formName) {
      this.$refs[formName].validate((valid) => {
        var that = this
        if (this.personAccountUpdate.password != '') {
          axios({
            headers: {
              Authorization: this.print.Authorization
            },
            method: 'put',
            data: {
              userName: this.personAccountUpdate.u_userName,
              fullName: this.personAccountUpdate.u_fullName,
              password: this.personAccountUpdate.password
            },
            url: '/api/users'
          }).then(
            function (reponse) {
              that.$message({
                message: '更改成功',
                type: 'success'
              })
              that.reload()
            },
            function (err) {
              that.$message.error('更改失败，请重新尝试')
            }
          )
        } else {
          this.$message({
            message: '密码没有输入',
            type: 'warning'
          })
        }
      })
    },

    handleRemove (file, fileList) {
      console.log(file, fileList)
      this.fileUpLoadList = []
    },

    uploadImg: function (file) {
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      this.fileData = file.raw
      this.fileName =
        file.raw.name.slice(0, file.raw.name.length - 4) + this.userId.userId
    },

    uploadAvatar: function () {
      let param = new FormData()
      param.append('file', this.fileData)
      param.append('fileName', this.fileName)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: this.print.Authorization
        } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
      } // 添加请求头
      var that = this
      axios
        .all([
          axios.post('/api/common/aliyun', param, config),
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'post',
            url: '/api/image',
            params: {
              imageName: this.fileData.name.slice(
                0,
                this.fileData.name.length - 4
              ),
              userId: this.userId.userId,
              tag: 'Avatar'
            }
          })
        ])
        .then(
          axios.spread(function (aliyunResponse, infoResponse) {
            that.$message({
              message: '上传头像成功',
              type: 'success'
            })
            that.reload()
          })
        )
    },

    deleteAvatar: function () {
      var that = this
      this.imageId = this.imageFile[0].imageId
      axios
        .all([
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'delete',
            url: '/api/image?imageId=' + this.imageId
          }),
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'delete',
            url: '/api/common/aliyun?fileurl=' + this.imageUrl
          })
        ])
        .then(
          axios.spread(function (del1, del2) {
            that.$message({
              message: '删除照片成功',
              type: 'success'
            })
            that.reload()
          })
        )
    }
  }
}
</script>
